<template>
  <div class="sidebar">
    <div class="middle">
      <div class="content-wrapper">
        <div class="title">
          <span class="title-name">期号</span>
          <span class="title-name">开奖号码</span>
        </div>
        <div class="content-detail">
          <div class="row" v-for="item in winningInfo" :key="item.id">
            <span class="left">
              {{item.series}}
            </span>
            <div class="right">
              <p class="numbers">
                <span class="number" v-for="(number, index) in item.numbers.split(',')" :key="index">
                  {{number}}
                </span>
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="hover-style">
          <span class="text">查看完整走势</span>
          <span class="icon">
            >>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    winningInfo: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      
    }
  },
  computed: {
    numbers() {

    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
  .sidebar
    width 200px
    float left
    box-sizing border-box
    .middle
      box-sizing border-box 
      position fixed
      top 138px
      .content-wrapper 
        width 198px
        .title 
          background $color-theme-dark
          line-height 34px
          align-items center
          border-top-left-radius 3px
          border-top-right-radius 3px
          font-size 0
          color #fff
          .title-name 
            display inline-block 
            width 50%
            font-size 15px
            font-weight 700
            box-sizing border-box 
            padding-left 20px
        .content-detail 
          width 100% 
          height 100% 
          box-sizing border-box 
          padding 10px
          align-items center
          border 1px solid $color-divide-line
          background #f8f5f5 
          .row 
            display flex
            justify-content space-between
            margin-bottom 10px
            min-height 30px
            &:last-child 
              margin-bottom 0
            .right 
              width 50%
              text-align right
              .numbers
                display flex 
                flex-wrap wrap 
                justify-content flex-end 
                .number 
                  width 20%
                  text-align right
                  border-right 1px solid $color-divide-line
                  box-sizing border-box
                  text-align center
                  margin-bottom 5px
                  line-height 11px
                  color $color-theme-red
                  font-weight 400
                  &:first-child 
                    border-left 1px solid $color-divide-line
                  &:nth-child(6)
                    border-left 1px solid $color-divide-line

      .bottom 
        line-height 36px
        text-align center
        color $color-sub-grey
        border 1px solid $color-divide-line
        border-top none
        width 198px
        box-sizing border-box
        border-bottom-left-radius 3px
        border-bottom-right-radius 3px
        background #f8f4f3 
</style>